<template>
	<view class="sbody">
		<view class="authBody">
			<view class="qrtitle">二维码</view>
			<view :class="hasPermission?'qrCodeShow':'qrCodeNoPermission'"></view>
			<view class="qrbottom">
				<view v-if="hasPermission">
					<image src="http://101.206.123.213:7051/static/image/common/tip.png" class="photo" />
					<text>请将上面的二维码对准闸机摄像头进行扫描</text>
				</view>
				<view style="font-weight: bold;font-size: 40rpx;" v-else>暂无权限,请联系管理员审核!</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasPermission: false
			}
		},
		methods: {},
		onLoad() {}
	}
</script>

<style>
	@import url("/static/font/iconfont.css");
</style>
<style scoped>
	.photo {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 14rpx;
		right: 20rpx;
	}

	.qrbottom {
		text-align: center;
		width: 90%;
		margin: 0 auto;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 24rpx;
	}

	.qrCodeShow {
		width: 80%;
		padding-bottom: 80%;
		margin: 0 auto;
		border: 1px solid #eee;
		border-radius: 10rpx;
	}

	.qrCodeNoPermission {
		width: 80%;
		padding-bottom: 80%;
		margin: 0 auto;
		background-image: url(http://101.206.123.213:7051/static/image/common/noPermission.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.qrtitle {
		text-align: center;
		font-weight: bold;
		border-bottom: 1px solid #eee;
		width: 90%;
		margin: 80rpx auto;
		height: 90rpx;
		line-height: 90rpx;
	}

	.authBody {
		width: 90%;
		margin: auto;
		height: 90%;
		border-radius: 10px;
		background-color: white;
		box-shadow: 0px 5upx 5upx #999999;
		padding-top: 20px;
	}

	.sbody {
		height: 100vh;
		background: url("http://101.206.123.213:7051/static/image/common/pic-background.png");
		background-size: cover;
		/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
		background-repeat: no-repeat;
		background-color: white;
	}
</style>
